<template>
	<view class="cart">
		购物车
		<view class="cartList">
			<view class="cartItem" v-for="(item,index) in cartList" :key="item.id">
				<!-- 选中状态 -->
				<text class="iconfont icon-xuanzhong":class={selected:item.isSelected}></text>
				<!-- 商品信息 -->
				<view class="goodsItem">
					<image class="img" :src="item.listPicUrl" ></image>
					<view class="goodsInfo">
						<view class="tag">{{item.name}}</view>
						<view class="price">￥{{item.counterPrice}}</view>
					</view>
				</view>
				<!-- 数量控制 -->
				<view class="controlCount">
					<text class="sub">-</text>
					<text class="count">{{item.count}}</text>
					<text class="add">+</text>
				</view>
				</view>
			</view>
		<!-- 底部 -->
		<view class="footer">
				<view class="left">
					<text class="iconfont icon-xuanzhong"></text>
					<text>已选 2</text>
				</view>
				<view class="right">
					<view class="btn">合计：￥ 999</view>
					<view class="btn order">下单</view>
				</view>
				</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		data(){
			return{
				
			}
		},
		computed:{
			...mapState({
			cartList:state=>state.cart.cartList	
			})
		}
	}
</script>

<style lang="stylus">
.cart
	background-color: #f5f5f5
	.cartList
		.cartItem
			position: relative
			background-color: #fff
			padding: 20rpx
			width: 100%
			height 172rpx
			margin-top: 20rpx
			display: flex
			.iconfont
				font-size: 40rpx
				line-height 172rpx
				&.selected
					color: #dd1a21
			.goodsItem
				display: flex
				.img
					width: 172rpx
					height: 172rpx
					margin 0 40rpx
					background-color: #f5f5f5
				.goodsInfo
					.tag
						font-size: 40rpx
					.price
						color: red
			.controlCount
				position: absolute
				right: 60rpx
				bottom: 30rpx
				text
					border: 1px solid #ddd
					padding: 8rpx 30rpx
					
	.footer
		position fixed
		bottom 0
		left 0
		right 0
		height 100rpx
		line-height 100rpx
		background #fff
		display flex
		justify-content space-between
		border-top: 1rpx solid #ccc
		.iconfont
			margin: 0 20rpx
		.right
			display: flex
			.btn
				flex: 1
				width: 200rpx
				display: inline-block
				&.order
					background: #dd1a21
					text-align: center
					color: #fff
			
				
</style>